<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<ui:include src="../../template/resourcesPage.xhtml" />
	
</h:head>
<h:body>

	<pe:layout fullPage="true">
		<pe:layoutPane position="north" id="pnlCenterHead" closable="false"
			resizable="false">
			<h1 class="title ui-widget-header ui-corner-all">Car maintenance</h1>
		</pe:layoutPane>
		<pe:layoutPane position="center" id="pnlCenterBody">
			<h:form id="form">
				<p:dataTable var="car" value="#{tableBean.cars}"
					rowKey="#{car}" paginator="true" rows="10"
					selection="#{tableBean.selectedCar}"   selectionMode="single"
					filteredValue="#{tableBean.filteredCars}" id="carsTable"
					rowsPerPageTemplate="10,15,20" 
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

					<p:ajax event="rowSelect" update=":form1:display"
						oncomplete="carDialog.show()" />

					<f:facet name="header">  
			            List of Cars  
			        </f:facet>

					<p:column headerText="Model" sortBy="#{car.model}"
						filterBy="#{car.model}">  
			            #{car.model}  
			        </p:column>

					<p:column headerText="Year" sortBy="#{car.year}"
						filterBy="#{car.year}">  
			            #{car.year}  
			        </p:column>

					<p:column headerText="Manufacturer" sortBy="#{car.manufacturer}"
						filterBy="#{car.manufacturer}">  
			            #{car.manufacturer}  
			        </p:column>

					<p:column headerText="Color" sortBy="#{car.color}"
						filterBy="#{car.color}">  
			            #{car.color}
			        </p:column>
				</p:dataTable>
			</h:form>
		</pe:layoutPane>
	</pe:layout>

	<h:form id="form1">

		<p:dialog header="Car Detail" widgetVar="carDialog"
			closable="#{templateConfiguration.DLG_CLOSABLE}"
			resizable="#{templateConfiguration.DLG_RESIZABLE}"
			modal="#{templateConfiguration.DLG_MODAL}"
			showEffect="#{templateConfiguration.DLG_SHOWEFFECT}"
			hideEffect="#{templateConfiguration.DLG_HIDEEFFECT}"
			visible="#{facesContext.validationFailed}">

			<ui:include src="fCountrEditGrid.xhtml" />

			<div
				class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
				<p:commandButton styleClass="btnForm btnSave ui-state-focus" update ="display"  icon="ui-icon-disk"
					value="Guardar" action="#{tableBean.doSomething}" 
				></p:commandButton>
				<p:commandButton styleClass="btnForm btnDelete" update ="display"  icon="ui-icon-trash"
					value="Eliminar" action="#{tableBean.doSomething}" 
				></p:commandButton>
				<p:commandButton styleClass="btnForm btnCancel" value="Cancelar" icon="ui-icon-cancel"
					onclick="carDialog.hide()" process="@this">
					<p:resetInput target="display" />
				</p:commandButton>
			</div>
		</p:dialog>
		
		<pe:remoteCommand name="updateTable" update=":form" />
	</h:form>

	<p:growl id="growl"
		showDetail="#{templateConfiguration.GRWL_SHOWDETAIL}"
		autoUpdate="true"
		life="#{templateConfiguration.GRWL_LIFE}" globalOnly="true" />
		
	<pe:tooltip global="true" autoShow="true"  position="left center" targetPosition="right center" forSelector=".ui-state-error"/>
	
	

</h:body>
</html>